<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jstl/fmt_rt" prefix="fmt"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!-- 验证是否已经登录 -->
<c:if test="${empty user}">
	<c:redirect url="unlogin_error.html" />
</c:if>
<html>
	<head>
		<title>Chatroom!!!</title>
		<meta http-equiv="Content-Type" content="text/html" />
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<!--  <script type="text/javascript" src="js/chat.js"></script> -->
		<link rel="stylesheet" type="text/css" href="css/chatroomStyles.css">
		<link rel="stylesheet" type="text/css"
			href="http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css">
		<!-- Source file -->
		<link rel="stylesheet" type="text/css"
			href="http://yui.yahooapis.com/2.8.1/build/fonts/fonts-min.css">
		<script src="http://www.google.com/jsapi"></script>
		<script>
	google.load("jquery", "1");

	google.setOnLoadCallback(function() {

		scrollDown();
		var sendfunc = function(event) {
			var msg = $("#msgInput").val();
			$.post("message", {
				"message" : msg
			}, function(data, textStatus) {
				$("#msgWindow").html(data);
				scrollDown();
				$("#msgInput").val('')
			});
		}

		$("#btnSend").bind("click", sendfunc);

		$("#msgInput").keydown(function(event) {
			if (event.keyCode == 13) {
				sendfunc();
			}
		});

		var refresh = function(event) {
			var msg = "";
			$.post("message", {
				"message" : msg
			}, function(data, textStatus) {
				$("#msgWindow").html(data);
				scrollDown();
			});
		}

		setInterval(refresh, 1000);

	});

	function scrollDown() {
		var msgdiv = document.getElementById("msgWindow");
		msgdiv.scrollTop = msgdiv.scrollHeight;
	}
</script>


	</head>

	<body>
		<ul id="nav">
			<li>
				<a href="#">聊天室</a>
			</li>
			<li>
				<a href="mailservice.jsp">邮件服务</a>
			</li>
			<li>
				<a href="personalInfo.jsp">修改个人信息</a>
			</li>
			<%if(session.getAttribute("manager")!=null){ %>
				<li>
					<a href="manager.jsp">后台管理</a>
				</li>
			<%} %>
			<li>
				<a href="index.jsp">退出</a>
			</li>
		</ul>
		<ul id="namelist">
			<li
				style="font-weight: bold; border-bottom: 1px solid black; padding: 2px; background: #CCCCCC">
				在线用户列表
			</li>
			<c:forEach items="${users}" var="user">
				<li>
					<c:out value="${user.value.username}" />
				</li>
			</c:forEach>
		</ul>
		<div id="msgWindow">
			<c:forEach items="${messages}" var="msg">
				<font
					color="<c:choose><c:when test="${user.username eq msg.user.username }">green</c:when><c:otherwise >blue</c:otherwise></c:choose>">
					<b><c:out value="${msg.user.username}" /> </b>&nbsp;&nbsp;<fmt:formatDate
						value="${msg.date}" pattern="hh:mm:ss" /> </font>
				<br />
					&nbsp;&nbsp;&nbsp;&nbsp;<c:out value="${msg.message}" />
				<br />
			</c:forEach>
		</div>
		<div id="editor">
			<input id="msgInput" type="text" name="message" />
			<input id="btnSend" type="button" value="发送" />
		</div>

	</body>
</html>
